.app-setting {
  .theme-item {
    position: relative;
    --min-height: 0.9rem;
    .info {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
      background-color: #d7d7d7;
      position: relative;
    }
    .info.is-select::before {
      content: '';
      width: 0.24rem;
      height: 0.12rem;
      top: 0.08rem;
      left: 0.06rem;
      position: absolute;
      border-left: 0.04rem solid  #549ee7;
      border-bottom: 0.04rem solid  #549ee7;
      transform: rotate(-45deg);
    }
    .name {
      padding-left: 0.4rem;
      font-size: 0.24rem;
      line-height: 0.36rem;
    }
    .select {
      height: 0.48rem;
      width: 1rem;
      margin: 0.08rem 0.04rem;
    }
  }
  .theme-content--custom {
    .theme-option {
      --inner-padding-end: 0px;
    }
    .theme-option__color-preview {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
    .theme-option__color-name {
      display: flex;
      align-items: center;
      span {
        padding-left: 0.4rem;
      }
    }
    .theme-option__color-group {
      display: flex;
    }
    .theme-option.theme-option__default .theme-option__color-group{
      padding-right: 0.6rem;
    }
    ion-icon {
      font-size: 0.36rem;
      padding: 0 0.12rem;
      transform: translateY(0.1rem);
      color: #73849A;
    }
    .theme-option__color-hex {
      width: 2.4rem;
      div {
        font-size: 0.24rem;
        padding: 0.06rem 0.1rem;
        width: 1.74rem;
        margin-left: 0.06rem;
        color: #fff;
        background-color: #edf2f6;
        border-radius: 0.04rem;
      }
    }
    .theme-option__input {
      transition: 0.3s border;
      border: 0.02rem solid #D4D9E1;
      border-radius: 0.08rem;
      height: 0.56rem;
      max-width: 1.8rem;
      display: flex;
      align-items: center;
      input[type="text"] {
        appearance: none;
        border: 0;
        outline: none;
        font-size: 0.24rem;
        width: 1.2rem;
        color: #73849A;
        padding: 0.02rem 0.04rem;
        background-color: transparent;
      }
    }
    .theme-option__color-picker {
      border: 0.02rem solid rgba(0, 0, 0, 0.1);
      width: 0.24rem;
      height: 0.24rem;
      margin: 0 0.14rem;
      border-radius: 0.04rem;
      background-color: #d7d7d7;
      input[type="color"] {
        appearance: none;
        display: block;
        width: 0.24rem;
        height: 0.24rem;
        border: none;
        margin: 0;
        padding: 0;
        outline: 0;
        opacity: 0;
      }
    }
  }
  .theme-content__toolbar {
    .button {
      font-size: 0.32rem;
    }
  }
}